<template>
	<view class="test-content">
		<view class="test-card">
			<view class="card-top">
				<view>
					<u-avatar :src="src"></u-avatar>
					<view>最高成绩 {{maxScore}} 分</view>
				</view>
				<u-button size='mini' type="success" shape="circle" :custom-style="customStyle" @click="resumeExam">继续考试</u-button>
			</view>
			<view class="card-bottom">
				<image :src="bgImg" mode=""></image>
				<view class="card-text">
					<view>
						<view class="score green">{{examCount}}<text>次</text></view>
						<view>考试次数</view>
					</view>
					<view>
						<view class="score red">{{averScore}}<text>分</text></view>
						<view>平均成绩</view>
					</view>
					<view>
						<view class="score green">{{predictScore}}<text>分</text></view>
						<view>成绩预测</view>
					</view>
				</view>
			</view>
		</view>
		<view class="scores-list">
			<zb-table :show-header="true" :columns="column" :stripe="false" :fit="false" :border="true"
				@edit="buttonEdit" :data="tableData" :cell-style="{backgroundColor:'#fff'}"></zb-table>
		</view>
	</view>
</template>

<script>
	import { getExamlist } from '../../api/index.js'
	import config from '@/config/config.js'
	export default {
		data() {
			return {
				tableData: [],
				bgImg:config.baseUrl + '/uploads/images/k0qhLfSULGiZBDANnvegr2dhzGqXczfmVbMvkJNK.png',
				column: [{
						name: 'subject',
						label: '科目',
						align: 'center',
						width: 80,
					},
					{
						name: 'scores',
						label: '分数',
						align: 'center',
						width: 80,
					},
					{
						name: 'created_at',
						label: '时间',
						align: 'center',
						width: 140,
					},
					{
						name: 'operation',
						type: 'operation',
						align: 'center',
						label: '操作',
						renders: [{
							name: '查看',
							func: 'edit', // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							size: 'mini',
							type: 'success'
						}, ]
					},
				],
				src: '',
				customStyle: {
					background: '#2AC092',
					color: '#fff'
				},
				examCount:0,
				maxScore:0,
				averScore:0,
				predictScore:0
			}
		},
		mounted() {
			this.init()
		},
		methods:{
			init(){
				let that = this
				getExamlist().then(res=>{
					// console.log(888888888,res.data.data);
					that.tableData = res.data.data;
					// 计算考试次数,最高分数,平均成绩,预测成绩
					let sumScore = 0;// 计算总分数
					let minScore = that.tableData[0].scores;//计算最小分数
					if(that.tableData.length != 0){
						that.tableData.map(item=>{
							if(item.subject == 1){
								item.subject = '科目一'
							}
							if(item.subject == 4){
								item.subject = '科目四'
							}
							// 获取最大分数
							if(item.scores > that.maxScore){
								that.maxScore = item.scores;
							}
							// 获取最小分数
							if(item.scores <= minScore){
								minScore = item.scores;
							}
							sumScore += item.scores;
						})
						// 考试次数
						that.examCount = that.tableData.length;
						// 平均成绩
						that.averScore = (sumScore / that.examCount).toFixed(0);
						// 预测成绩
						that.predictScore = ((sumScore - minScore - that.maxScore) / (that.examCount - 2)).toFixed(0);
						
						that.tableData = that.tableData
					}
				}).catch()
			},
			buttonEdit(item){
				// console.log(88888,item);
				uni.navigateTo({
					url:'/pagesA/mockExam/index?result=' + JSON.stringify(item)
				})
			},
			resumeExam(){
				uni.navigateTo({
					url:'/pagesA/mockExam/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-button {
		background: #2AC092;
		color: #fff;
		font-size: 16rpx;
	}

	.green {
		color: #2AC092;
	}

	.red {
		color: #FF6D6A;
	}

	.test-card {
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;

		.card-top {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-weight: bold;

				>view {
					margin-left: 10rpx;
				}
			}
		}

		.card-bottom {
			width: 100%;
			height: 150rpx;
			position: relative;

			>image {
				width: 100%;
				height: 100%;
			}

			.card-text {
				position: absolute;
				top: 10%;
				display: flex;
				width: 100%;
				justify-content: space-around;
				text-align: center;

				.score {
					font-size: 48rpx;
					margin-bottom: 20rpx;

					>text {
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.scores-list {
		margin-top: 20rpx;
	}
</style>